import {
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  TextInput,
  Pressable,
  Alert,
} from 'react-native';
import React, {useState} from 'react';
export default function App() {
  const style = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'flex-start',
    },
    title: {
      fontSize: 30,
      fontWeight: 'bold',
      marginTop: 150,
      marginBottom: 100,
    },
    input: {
      width: '80%',
      height: 45,
      borderWidth: 1,
      borderColor: '#000',
      borderRadius: 5,
      padding: 10,
      marginBottom: 20,
    },
    inputBox: {
      width: '100%',
      alignItems: 'center',
    },
    loginButton: {
      width: '80%',
      height: 45,
      justifyContent: 'center',
      backgroundColor: '#007AFF',
      alignItems: 'center',
      marginTop: 20,
    },
    loginButtonText: {
      color: '#fff',
      fontSize: 16,
      fontWeight: 'bold',
    },
  });
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  return (
    <SafeAreaView style={style.container}>
      <View>
        <Text style={style.title}>欢迎登录</Text>
      </View>
      <View style={style.inputBox}>
        <TextInput
          placeholder="请输入账户"
          style={style.input}
          onChangeText={(text: string) => {
            setUsername(text);
          }}
        />
        <TextInput
          secureTextEntry={true}
          placeholder="请输入密码"
          style={style.input}
          onChangeText={(text: string) => {
            setPassword(text);
          }}
        />
      </View>
      <Pressable
        style={style.loginButton}
        onPress={() => {
          Alert.alert('登录成功', `用户名:${username} 密码:${password}`, [
            {text: '确定'},
          ]);
        }}>
        <Text style={style.loginButtonText}>登录</Text>

        <Text>添加账号 | 忘记密码</Text>
      </Pressable>
    </SafeAreaView>
  );
}
